<template>
    <div class="search_bar_container">
        <el-row :gutter="10" class="search_bar">
            <el-col :span="9">
                <el-row :gutter="20">
                    <el-col :span="11">
                        <div class="select_store flex_row" style="cursor: pointer;">
                            <span class="select_store_span font_black3">云店：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="reqShopCount.shopid"
                                placeholder="请选择" size="mini" @change="selectHandleChange">
                                <el-option v-for="item in shop_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="1"><el-divider direction="vertical"></el-divider></el-col>
                    <el-col :span="11">
                        <div class="select_store flex_row" style="cursor: pointer;">
                            <span class="select_store_span font_black3">经手人：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="reqShopCount.uid_cp"
                                placeholder="请选择" size="mini" @change="selectHandleChange">
                                <el-option v-for="item in staff_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="15">
                <div class="flex_between">
                    <div class="flex_row mr10 flex1">
                        <div class="date-box flex_between flex1 mr20">
                            <div :class="['date-box-item', 'flex_center', item.id == reqShopCount.group ? 'active' : '']"
                                v-for="item in group_ls" :key="item.value" @click="selectDate(item.id)">
                                <span>{{ item.name }}</span>
                            </div>
                        </div>
                        <div style="width: 220px;">
                            <el-date-picker style="width: 220px;" size="mini" v-model="value1" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="handleDateChange">
                            </el-date-picker>
                        </div>
                    </div>
                    <div>
                        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import https from "@/js/https/Https.js";

// 获取当前组件实例
const { proxy } = getCurrentInstance()
import downloadFile from "@/js/upload/DownloadFile.js"
import ExcelExporter from '@/utils/excelExport.js'

import { useAppointmentState } from '@/components/report/hooks/useAppointmentState'
// 使用销售状态
const {
    shop_ls,
    staff_ls,
    reqShopCount,
    selectHandleChange,
    group_ls,
    selectDate,
    exportData,
} = useAppointmentState()

const value1 = ref([])

const props = defineProps({
    fromType: {
        type: String,
        default: '' // yy 预约报表  fw 项目报表
    }
})

// 日期选择器配置
const pickerOptions = {
    disabledDate(time) {
        return time.getTime() > Date.now()
    }
}

const handleDateChange = (val) => {
    if (val) {
        reqShopCount.value.stime = val[0]
        reqShopCount.value.dtime = val[1]
        reqShopCount.value.group = '5'
        selectHandleChange()
    } else {
        reqShopCount.value.stime = ''
        reqShopCount.value.dtime = ''
        reqShopCount.value.group = ''
        selectHandleChange()
    }
}

// 导出数据表格
const handleExport = () => {
    if (!reqShopCount.value.stime && !reqShopCount.value.dtime) {
        return proxy.$message.error('请选择导出报表的开始日期和结束日期')
    }
    let param = {
        ...reqShopCount.value,
        export: 1
    }
    // 销售表首页接口  所有都是调用次接口
    if (props.fromType == 'yy') {
        param.is_yy = 2;
        https.getReportBookCount(param, back);
    } else {
        param.is_yy = 1;
        https.getReportShopConut(param, back);
    }
    async function back(data) {
        if (!data) {
            return;
        }
        if (data.status == 1) {
            if (!data.data) {
                return;
            }
            data = data.data;
            const count_ls = data?.count_ls || []
            console.log("count_ls==", count_ls)
            if (count_ls && count_ls.length > 0) {
                downloadExcel(count_ls)
            } else {
                proxy.$message.error('暂无数据导出' || data?.msg)
            }
        }
    }
}

// 自定义表头映射
const downloadExcel = async (count_ls) => {
    const exportData = count_ls.map((item, index) => {
        const baseData = {
            index: index + 1,
            timestr: item.timestr,
            amount_re: item.amount_re,
            num_od_re: item.num_od_re,
            number_re: item.number_re
        }
        // 只有当不是预约报表时才包含毛利字段
        if (props.fromType !== 'yy') {
            baseData.profit_re = item.profit_re
        }
        return baseData
    })
    
    const headers = {
        index: '序号',
        timestr: '日期',
        amount_re: '销售额',
        num_od_re: '单数',
        number_re: '数量'
    }
    // 只有当不是预约报表时才包含毛利表头
    if (props.fromType !== 'yy') {
        headers.profit_re = '毛利'
    }
    try {
        const success = await ExcelExporter.export(
            exportData,
            props.fromType == 'yy' ? '预约报表.xlsx' : '项目报表.xlsx',
            headers
        )
        if (success) {
            proxy.$message.success('成功导出表格,请保存')
        }
    } catch (error) {
        proxy.$message.error('导出失败：' + error?.message)
    }
}

onMounted(() => {
    // 设置默认日期为最近30天
    // const end = new Date()
    // const start = new Date()
    // start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    // value1.value = [start, end]
})


</script>

<style lang="scss" scoped>
.search_bar_container {
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 4px;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search_bar {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px;
}

.date-box {
    height: 28px;
    border: 1px solid #dddfe2;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.3s;
}

.date-box-item {
    height: 100%;
    flex: 1;
    border-right: 1px solid #dddfe2;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.date-box-item:last-child {
    border-right: none;
}

.date-box-item:hover:not(.active) {
    color: #3388ff;
}

.active {
    background-color: #3388ff;
    color: #fff;
}

.select_store ::v-deep .el-input__inner {
    background-color: #fff !important;
    border: 1px solid #dddfe2 !important;
    // color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 4px !important;
    transition: all 0.3s;
}

.select_store ::v-deep .el-input__inner:hover {
    border-color: #3388ff !important;
}
</style>